<link rel="stylesheet" href="../node_modules/mint-ui/lib/tab-item/style.css">
<template>
    <div id="app">


       


        <transition :name="transitionName">

            <router-view></router-view>

        </transition>
        
        <mt-tabbar v-model="selected" fixed  class="foot">

            <mt-tab-item id="首页" @click.native="top()">

               
                 首页
            </mt-tab-item>

            <mt-tab-item id="分类" @click.native="bookrack()">

               
                发现
            </mt-tab-item>

            <mt-tab-item id="话题" @click.native="huati()">

               
                话题
            </mt-tab-item>

            <mt-tab-item id="我的" @click.native="my()">

               
                我的
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script>

    export default {
        name: 'app',
        data () {
            return {

                selected: "首页",
                


            }
        },
        computed:{
            transitionName(){
                return this.$store.state.transitionName;
            }
        },
        methods: {

            top(){

                this.$store.commit("changeStyle",1);
                this.$router.push('/')
            },
            bookrack(){

                this.$store.commit("changeStyle",2);
                this.$router.push('/bookrack')
            },
            huati(){

                this.$store.commit("changeStyle",3);
                this.$router.push('/huati')
            },
            my(){

                this.$store.commit("changeStyle",4);
                this.$router.push( '/my')
            },

        },

    }
</script>

<style>

    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;

        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;;
        background-color: ;
        padding-top:1%;
        padding-bottom:20%;
        width:100%
    }
    .search{

        height:15px;
        margin-top:-7% ;


    }

    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #339933;
    }
    .header{
        font-size: 140%;
        height: 2.5em;
        background-color: #339933;
    }
    .foot{

        height: auto;
    }

    .mint-tab-item-icon {
        width: 28%;
        height: auto;
        margin: 0 auto 5px;
        padding-bottom: 5px;
    }
    .slideRight-enter,
    .slideLeft-enter{
        position:absolute;
        width: 100%;

    }
    .slideRight-leave,
    .slideLeft-leave{
        position:absolute;
        width: 100%;

    }
    .slideRight-enter-active,
    .slideLeft-enter-active{
        transition:all 0.3s ease;
    }
    .slideRight-leave-active{
        position: absolute;
        transition: all 0.3s ease;
        transform: translate(-100%);
    }
    .slideRight-enter{
        transform: translateX(100%);
    }
    .slideLeft-leave-active{
        position: absolute;
        transition: all 0.3s ease;
        transform: translate(100%);
    }
    .slideLeft-enter{
        transform: translateX(-100%);
    }
</style>
